<template>
  <el-carousel
    classs="t-form-carousel"
    :style="getHeightStyle"
    :height="`${getHeight}px`"
  >
    <el-carousel-item
      v-for="(option, index) in getOptions()"
      :key="index"
    >
      <p class="text-center">
        {{ option.label }}
      </p>
      <el-image
        :fit="config.imageFit"
        :src="option.image"
        style="width: 100%"
        :style="getHeightStyle"
      />
    </el-carousel-item>
  </el-carousel>
</template>

<script lang="ts" name="TImageCarousel" setup>
import { computed } from "vue";
import { formEmits, formItemProps, useFormItem } from "../hooks/useFormItemHook";

const props = defineProps({
  ...formItemProps
});

const emits = defineEmits(formEmits);

const { config, getOptions, isMobileTag } = useFormItem(props, emits);

const getHeight = computed(() => {
  if (isMobileTag.value) {
    return config?.value.mHeight ? config?.value.mHeight : 150;
  }
  return config?.value.height ? config?.value.height : 300;
});

const getHeightStyle = computed(() => {
  return { height: `${getHeight.value}px` };
});
</script>
